<template>
  <div class="iot_box">
    <div class="iot_up">
        <UpNav></UpNav>
    </div>
    <div class="iot_down">
        <div class="iot_left" :class="LeftWidth">
            <MainMenu @ChangeMenu="MenuChange"></MainMenu>
            <transition-group name="Menu">
            <HomeMenu v-show="Home" key="1"></HomeMenu>
            <CategoryMenu v-show="Category" key="2"></CategoryMenu>
            </transition-group>
        </div>
        <div class="iot_content" :class="ContentWidth" @scroll="MoreGoods($event,indexFlog)">
            <HomePage v-show="indexFlog == 0"></HomePage>
            <HotPage :indexFlog="indexFlog" ></HotPage>
            <CategoryPage :indexFlog="indexFlog"></CategoryPage>
            <CartPage :indexFlog="indexFlog" v-show="indexFlog == 14"></CartPage>
            <UserPage v-if="indexFlog == 15"></UserPage>
            <SearchPage v-show="indexFlog == 16"></SearchPage>
        </div>
    </div>
  </div>
</template>

<script>
    import {inject, provide, reactive, ref} from 'vue'
    import UpNav from './UpNav.vue'
    import MainMenu from './MainMenu.vue'
    import HomeMenu from './HomeMenu.vue'
    import CategoryMenu from './CategoryMenu.vue'
    import HomePage from './HomePage.vue'
    import HotPage from './HotPage.vue'
    import CategoryPage from './CategoryPage.vue'
    import CartPage from './CartPage.vue'
    import UserPage from './UserPage.vue'
    import SearchPage from './SearchPage.vue'
    export default {
        name:'TablePage',
        components:{
            UpNav,
            MainMenu,
            HomeMenu,
            CategoryMenu,
            HomePage,
            HotPage,
            CategoryPage,
            CartPage,
            UserPage,
            SearchPage
        },
        setup(){
            let Home = ref(true)
            let Category = ref(false)
            let LeftWidth = ref('iot_leftwidth1')
            let ContentWidth = ref('iot_width1')
            function MenuChangeIn(id){
                if(id == 0){
                    Category.value = false
                    setTimeout(() => {
                    Home.value = true
                }, 300);
                }else{
                    Home.value = false
                    setTimeout(() => {
                    Category.value = true
                }, 300);
                }
            }
            function MenuChange(id){
                if(id == 0 || id == 1){
                    MenuChangeIn(id)
                    LeftWidth.value = 'iot_leftwidth1'
                    ContentWidth.value = 'iot_width1'
                }else{
                    Home.value = false
                    Category.value = false
                    setTimeout(() => {
                    LeftWidth.value = 'iot_leftwidth2'
                    ContentWidth.value = 'iot_width2'
                    }, 250);
                }
            }
            provide('MenuChange',MenuChange)
            //加载更多商品
            let indexFlog = ref(0)
            provide('indexFlog',indexFlog);
            function ChangeIndexFlog(GoalIndexFlog){
            indexFlog.value = GoalIndexFlog
            }
            provide('ChangeIndexFlog',ChangeIndexFlog);
            let NumberFlog = reactive([2,2,2,2,2,2])
            let HotUrl = ['/hot/preference','/hot/inVogue','/hot/oneStop','/hot/new']
            const GetMoreGoods = inject('GetMoreGoods'); 
            const GetMoreHotGoods = inject('GetMoreHotGoods');
            const GetSearchGoods = inject('GetSearchGoods');
            let keyword = ref('')
            provide('keyword',keyword);
            function MoreGoods(event,index){
                if(index == 0){
                    if(event.target.scrollTop > event.target.scrollHeight -  event.target.offsetHeight - 44){
                    if(GetMoreGoods(NumberFlog[index])){
                        NumberFlog[index]++
                    }
                }
                }else if(index <= 4){
                    if(event.target.scrollTop > event.target.scrollHeight -  event.target.offsetHeight - 44){
                    if(GetMoreHotGoods(index,HotUrl[index-1],NumberFlog[index])){
                        NumberFlog[index]++       
                    }
                }
            }else if(index == 16){
                if(event.target.scrollTop > event.target.scrollHeight -  event.target.offsetHeight - 44){
                    if(GetSearchGoods(keyword,NumberFlog[5])){  
                        NumberFlog[5]++  
                    }
            }
            }
        }
            return {Home,Category,LeftWidth,MenuChange,ContentWidth,MoreGoods,indexFlog}
        }
    }
</script>

<style scoped>
    .iot_box{
        overflow: hidden;
        width: 960px;
        height: 614px;
        background-color:#f7f7f7;
        position:fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 20px;
        padding-bottom: 20px;
    }
    .iot_up{
        width: 100%;
        height: 75px;
        background-image: url(../assets/icons/logo/navigator_bg.png);
        background-size:cover;
    }
    .iot_down{
        display: flex;
        width: 100%;
        height: 519px;
    }
    .iot_left{
        display: flex;
        transition: all .5s;
    }
    .iot_content{
        transition: all .5s;
        background-color: #f7f7f7;
        margin: 10px;
        border: 5px solid #f7f7f7;
        border-radius: 5px;
        overflow-y: overlay;
        overflow-x: hidden;
    }
    .iot_content::-webkit-scrollbar{
        width: 5px;
    }
    .iot_content::-webkit-scrollbar-thumb{
        background:#b0b0b0;
        border-radius: 1px; 
    }
    .iot_width1{
        width: 740px;
    }
    .iot_width2{
        width: 876px;
    }
    .iot_leftwidth1{
        width: 200px;
    }
    .iot_leftwidth2{
        width: 66px;
    }
    .Menu-leave-to,.Menu-start{
        opacity: 0;
    }
    .Menu-leave-active,.Menu-start-active{  
        transition: opacity 0.25s;  
    }  
    .Menu-leave,.Menu-start-to {    
        opacity: 1;
    }
</style>